<!DOCTYPE html>

<!--
  Google I/O 2011 HTML slides template
  
  Created by Luke Mahé (lukem@google.com) 
         and Marcin Wichary (mwichary@google.com).
   
  URL: http://go/io-html-slides
-->

<html>
  <head>
    <title>Google I/O</title>

    <meta charset='utf-8' />
    <script src='http://io-2011-slides.googlecode.com/svn/trunk/slides.js'></script>
  </head>
  
  <style>
    /* Your individual styles here, or just use inline styles if that’s
       what you want. */

    .code { font-family: 'Droid Sans Mono', 'Courier New', monospace; }
    
  </style>

  <body style='display: none'>

    <section class='slides layout-widescreen'>
      
      <!-- Your slides (<article>s) go here. Delete or comment out the
           slides below. -->
      
      <article class='biglogo'>
      </article>
      <article style="padding-right: 20px;">
      	<p><img style="float: right; margin: 0px;" src="https://chart.googleapis.com/chart?chs=500x500&cht=qr&chl=www.speakermeter.com/talks/geospatial-data-fusion-tables/&choe=UTF-8"/></p>
      	<h3>
          Session Info
        </h3>
        <p>Title: <b>Managing and Visualizing your 
Geospatial Data with Fusion Tables</b>
</p>
				<p>Hashtags: <b>#io2011 #Geo</b></p>
				<p>Feedback: <a href="http://goo.gl/79Lvg">http://goo.gl/79Lvg</a></p>
      </article>

      <article>
        <h1>
          Managing and Visualizing your
          <br>
          Geospatial Data with Fusion Tables
        </h1>
        <p>
          Kathryn Hurley, James McGill<br />
          Guest Speaker: Simon Rogers, Guardian Datablog
          <br>
          May 10, 2011
        </p>
      </article>

      <article> 
        <h3> 
          Agenda
        </h3> 
	        <ul>
	          <li>Intro to Fusion Tables</li>
	          <li>Quick Demo</li>
	          <li>Building an Application with Fusion Tables</li>
	          <li>Google Maps API & Fusion Tables</li>
	          <li>Simon Rogers, Guardian Datablog</li>
	        </ul>
      </article> 

      <article> 
        <h2> 
          Intro to Fusion Tables
        </h2> 
      </article> 

      <article>
	      <h3>
	        Intro to Fusion Tables
	      </h3>
        <p>
          A database in the cloud used to store and visualize your data
        </p>
        <iframe style="width: 900px; height: 450px; border: 0px;" scrolling="no"  src="http://www.google.com/fusiontables/embedviz?viz=MAP&q=select+col0%2C+col1%2C+col2%2C+col3%2C+col4%2C+col5%2C+col6%2C+col7%2C+col8%2C+col9%2C+col10%2C+col11%2C+col12%2C+col13%2C+col14%2C+col15%2C+col16%2C+col17%2C+col18%2C+col19%2C+col20%2C+col21%2C+col22+from+628653+&h=false&lat=51.402758957640296&lng=-0.00823974609375&z=12&t=1&l=col0"></iframe>*
        <p style="font-size: 15px;">
          * Source: Guardian
          <a target="_blank" href="http://www.guardian.co.uk/news/datablog/2011/mar/31/deprivation-map-indices-multiple">"Deprivation mapped: how you show the poorest (and richest) places in England"</a>
        </p>
      </article>
      <article>
	      <h3>
	        Another example visualization - Google Visualization API
	      </h3>
				<iframe style="margin-left: 100px; width: 900px; height: 375px; border: 0px;"  scrolling="no"  src="demos/gviz_barchart.html"></iframe>
				<p>Using Google Chart Tools to Create Interactive Dashboards<br />
					May 10, 02:30PM – 03:30PM / Room 1</p>
      </article>
      <article> 
        <h2> 
          Quick Demo
        </h2> 
      </article> 

      <article> 
        <h3> 
          Quick Demo
        </h3> 
	      <ul>
	        <li>"Merge" (aka Left Outer Join)</li>
	        <li>Permissions and Visibility</li>
	        <li>Create a Map
	          <ul style="margin-top: 10px;">
	            <li>Custom InfoWindow</li>
	            <li>Apply a Style</li>
	          </ul>
	        </li>
	      </ul>
      </article> 

      <article> 
        <h2> 
          Building an Application with Fusion Tables
        </h2> 
      </article>

      <article> 
        <h3> 
          Application ideas..
        </h3>
	      <ul>
	        <li>Newspapers around the world</li>
	        <li>Server connections for MMORPG</li>
	        <li>Dashboard for Sales Operations</li>
	        <li>Mapping store locations</li>
	        <li>Crowd sourcing for potholes</li>
	      </ul>
      </article>
      <article style="overflow: visible; position: absolute; z-index: 100;"> 
        <h3> 
          Application workflow - Mapping Newpapers Around the World
        </h3>
        <img style="display: block; margin: 125px 0 0 50px;" src="images/newspaper_app.png" />
      </article>
      <article style="position: absolute; z-index: 99; padding: 0;">
      	<iframe style="height: 100%; margin: 0px; border: 0;" scrolling="no"  src="http://www.google.com/fusiontables/embedviz?viz=MAP&q=select+col0%2C+col1%2C+col2%2C+col3+from+814144+&h=false&lat=16.29905101458183&lng=35.15625&z=2&t=1&l=col0"></iframe>
      </article>
      <article>
        <h2> 
          API Details
        </h2>
      </article>
      <article> 
        <h3> 
          SQL API Details
        </h3>
	      <ul>
	        <li>REST API</li>
	        <li>SQL Queries</li>
<pre>
CREATE TABLE newspapers (name: STRING, location: LOCATION, link: STRING)

INSERT INTO 123456 (name, location, link) VALUES ('NYT', 'New York', 'nyt.com')

SELECT * FROM 123456 WHERE name = 'NYT'

UPDATE 123456 SET location = 'New York, NY' WHERE ROWID = '301'
</pre>
	        <li>OAuth for authorization</li>
	      </ul>
      </article>

      <article> 
        <h3> 
          Sample Code*
        </h3>
<pre>
query = 'CREATE TABLE newspapers (name: STRING, location: LOCATION, link: STRING)'
  
headers = {
  'Content-Type': 'application/x-www-form-urlencoded',
}

serv_req = urllib2.Request(
  url='https://www.google.com/fusiontables/api/query',
  data=urllib.urlencode({'sql': query}),
  headers=headers)

//returns tableid if successful
tableid = urllib2.urlopen(serv_req)
</pre>
        <p><small>*Authorization steps omitted</small></p>
      </article>
      <article>
        <h2> 
          API Demo
        </h2>
      </article>
      <article>
        <h2> 
          New Features
        </h2>
      </article>
      <article> 
        <h3> 
          New API Features!
        </h3>
        <ul>
          <li>Map Feature Styling</li>
          <li>Info Window Customization</li>
        </ul>
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <p>Now launching to trusted testers</p>
      </article>
      <article>
        <h3>How to be a trusted tester</h3>
        <div style="text-align: center; margin-top: 200px;">
          <p>Sign up here:</p>
          <p><b>fusion-tables-api-trusted-testers@googlegroups.com</b></p>
        </div>
      </article>
      <article>
      	<h3>How do these new features work?</h3>
      	<ul>
      		<li>REST API</li>
      		<li>JSON objects represent styles and templates</li>
      	</ul>
      	<pre>
{
  ...
  "tableId": 12345,
  "markerOptions": {
    "iconName": "small-blue"
  }
  ...
}
      	</pre>
      </article>
      <article>
      	<h3>Why is this awesome?</h3>
      	<ul>
      		<li>Great if you're creating lots of tables<br />
      			<img src="images/tables.png" height="150" style="margin: 15px 0; display: inline;" />
      			<img src="images/tables.png" height="150" style="margin: 15px 0; display: inline;" /></li>
      		<li>Find out how public tables are styled</li>
      		<li>Part of the Google APIs Console</li>
      		<li>Google supported client libraries, makes OAuth easier</li>
      	</ul>
      </article>
      <article>
        <h3>Trusted Testers needed!</h3>
        <div style="text-align: center; margin-top: 200px;">
          <p>Sign up here:</p>
          <p><b>fusion-tables-api-trusted-testers@googlegroups.com</b></p>
        </div>
      </article>

         <article>
        <h2>
          Google Maps API <span style="font-size: 100px; color: #465886;"> &</span> Fusion Tables
        </h2>
      </article>

      <article class="fill">
        <img src="images/ft_blank_hi.png"/>
      </article>

      <article>
        <h3>
          Mapping your data
        </h3>
        <section>
        <pre class="prettyprint lang-js ">
var layer = new FusionTablesLayer({
  select: 'column',
  from: 200949,
});
layer.setMap(map);
</pre>
        <br><center><img style="-webkit-border-radius: 5px;" src="images/tableid2.png"/></center>
        </section>
      </article>

      <article class="fill">
        <!--<h3>Instant Map</h3>-->
        <img src="images/ft_basic_hi.png"/>
      </article>

      <article>
        <h3>
          Adding conditions
        </h3>
        <section>
        <pre class="prettyprint lang-js ">
var layer = new FusionTablesLayer({
  select: 'column',
  from: 12345,
  <strong>where: "Age > 50"</strong>
}); 
</pre><br><br><br>
        <!--<center><img src="selected.png" style="-webkit-border-radius: 15px; -webkit-box-shadow: 5px 5px 5px #888;"/></center>-->
        </section>
      </article>

      <!--<article class="fill" onslideleave="return filter_1()">-->
      <article class="fill">
        <!--<h3 id="query_1" style="margin-top: 20px">Query: "(Empty)"</h3>-->
        <iframe name="inside" height="430px" width="790px" src="map.html"></iframe>
        <!--<center><input type="button" onclick="filter_1()" value="Filter"></center>-->
      </article>

      <article>
        <h2>
          Why use FusionTablesLayer?
        </h2>
      </article>

      <article class="fill">
        <img src="images/ft_ui_hires4.png"/>
      </article>

      <article class="fill">
        <h3>Default behaviour</h3>
        <iframe name="inside" height="430px" width="790px" src="basic.html"></iframe>
      </article>

      <article>
        <h3>Customizing behaviour</h3>
        <pre class="prettyprint lang-js ">
var layer = new FusionTablesLayer({
  query: {
    select: 'column',
    from: 12345,
  },
  <strong>suppressInfoWindows: true</strong>
});

google.maps.event.addListener(layer, 'click', doSomethingCool);
</pre>
      </article>


      <article class="fill">
        <h3>Customizing behaviour</h3>
        <iframe name="inside" height="430px" width="790px" src="lightbox.html"></iframe>
      </article>

      <article class="fill">
        <h3>Styled Maps</h3>
        <img src="images/ft_styled_hd.png"/>
      </article>
      
      <article>
        <h3>Performance</h3>
          <center><img src="images/ft_graph4.png"></center>
          <!--<center><img src="https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=A|FF0000|000000" height="68px" width="42px"/> x 100 000 = 34s <img src="images/ftlogo2.png"/ style="padding-left: 45px;"> x 100,000 = 1s</center>
      -->
      </article>
      
     <article class="fill">
        <h3>Tiled Rendering</h3>
        <img src="images/ft_tiles_hd.png"/>
     </article>

      <!--
      <article>
        <h3>Performance revised</h3>
        <iframe name="graph_2" width="790px" src="graph2.html" style="border: none; -webkit-border-radius: 15px; margin-top: 15px; height=400px;"></iframe>
         <center><img src="https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=A|FF0000|000000" height="68px" width="42px"/> x 1000 = N Seconds</center>
      </article>
      -->

      <article>
        <h2>
          Add a little <span style="letter-spacing: 10px"><span style="color: #456BC6">S</span><span style="color: #5C8237">t</span><span style="color: #C74B3D">y</span><span style="color: #EBCC44">l</span><span color="#3C3C3C">e</span></span>
        </h2>
     </article>

      <article class="fill">
        <iframe name="inside" height="430px" width="790px" src="map_ranged.html"></iframe>
       </article>

     <article>
        <h3>
          Styling syntax
        </h3>
        <section>
        <span style="font-size: 18px;">
        <pre class="prettyprint lang-js ">
var layer = new FusionTablesLayer({
  query: {
    select: 'geometry',
    from: 815230,
  },
  styles: [{
    polygonOptions: {
      fillColor: "#00FF00"
    }
  }]
}); 
</pre>
</span>
<!--<div style="background: red; -webkit-border-radius: 15px; position: absolute; top: 200px; left: 530px; height:250px; width: 250px; color: white;"><br><br><center>TODO: Example.</center></div>-->
    </section>
      </article>

    <article class="fill">
        <img src="images/ft_base.png">
       </article>


     <article>
        <h3>
          Restricting styles
        </h3>
        <section>
        <span style="font-size: 18px;">
        <pre class="prettyprint lang-js ">
var layer = new FusionTablesLayer({
  ...
    {
      where: "bird_species > 300",
      polygonOptions: {
        fillColor: "#0000FF"
      }
    }]
}); 
</pre>
</span>
<!--<div style="background: red; -webkit-border-radius: 15px; position: absolute; top: 200px; left: 530px; height:250px; width: 250px; color: white;"><br><br><center>TODO: Example.</center></div>-->
    </section>
      </article>

 <article class="fill">
   <img src="images/ft_highlighted.png">      
 </article>

     <article>
        <h3>
          Cascading styles
        </h3>
        <section>
        <span style="font-size: 18px;">
        <pre class="prettyprint lang-js ">
var layer = new FusionTablesLayer({
  ...
    {
      where: "population > 5", /* People per km² */
      polygonOptions: {
        fillOpacity: 1.0
      }
    }]
}); 
</pre>
</span>
    </section>
      </article>

 <article class="fill">
  <img src="images/ft_cascading.png">
       </article>

     <article>
        <h3>
          Dynamically updating
        </h3>
        <section>
        <span style="font-size: 18px;">
        <pre class="prettyprint lang-js ">
  var newStyle = {
    where: 'plant_species > 1000',
    polygonOptions: {
      fillColor: "#FF0000"
    }
  };

  function updateStyle() {
    // Replace one existing style.
    var oldStyles = layer.get('styles'); 
    oldStyles[1] = newStyle; 
    layer.set('style', oldStyles);
  } 
</pre>
</span>
    </section>
      </article>

 <article>
        <h3>
          Dynamically updating II
        </h3>
        <section>
        <span style="font-size: 18px;">
        <pre class="prettyprint lang-js ">
google.maps.event.addDomListener(
  document.getElementById('some_button'),
  'click',
   updateStyle);
</pre>
</span>
    </section>
      </article>



 <article class="fill">
        <iframe name="inside" height="430px" width="790px" src="map_dynamic.html"></iframe>
       </article>
 
     <article>
        <h3>
          Pitfalls
        </h3>
        <section>
<center><span style="color: #C74B3D">bird_species > 100</span> ∩ <span style="color: #456BC6">bird_species < 100</span> = ∅.</center>
        <span style="font-size: 18px;">
        <pre class="prettyprint lang-js">
var layer = new FusionTablesLayer({
  query: {
    select: 'column',
    from: 12345,
    <strong>where: "bird_species < 100"</strong>
  },
  styles: [{
    <strong>where: "bird_species > 100"</strong>,
    polyline: {
      strokeColor: "#FF0000",
    }
  }]
}); 
</pre>
</span>
    </section>
      </article>

<article>
        <h3>
          Other styles
        </h3>
        <ul>
          <li>
           Polygons
           <ul><li>Fill color/opacity</li>
           <li>Outline color/opacity</li>
           <li>Outline width</li></ul>
          </li>
           <li>
           Polylines
           <ul><li>Line color/opacity</li>
           <li>Line width</li></ul>
          </li>
          <li>
           Markers / Points
           <ul><li>Icon name (from a predefined set)</li></ul>
          </li>
        </ul>
      </article>

      <article>
        <h3>
          Worth noting
        </h3>
        <ul>
          <li>
           Styles can be applied to any public or unlisted table. 
          </li>
           <li>
            Up to 5 styles per layer.
          </li>
          <li>
            5 layers per map, 1 of which can be styled.
          </li><li>
            Part of the Maps API Experimental Features.
          </li><li>
            Check out the reference - live now!
          </li>
        </ul><br><br>
        <center><img src="http://www.zorgloob.com/picleft/labs2.png"></center>
      </article>



      <article> 
        <h2> 
          Simon Rogers<br />Editor, Guardian Datablog
        </h2> 
      </article>
      <article>
        <h3> 
          Summary
        </h3> 
      	<ul>
      		<li>New features for trusted testers in the Fusion Tables API:<ul>
      			<li>Map Feature Styling</li>
      			<li>Info Window Customization</li>
      		</ul></li>
      		<li>New Google Maps API Feature:<ul>
      			<li>Dynamic Styling</li>
      		</ul></li>
      	</ul>
      </article>
      <article> 
        <h3> 
          Links
        </h3> 
        <ul> 
          <li>Fusion Tables - <a href="http://www.google.com/fusiontables">http://www.google.com/fusiontables</a></li>
	        <li>Fusion Tables API - <a href="http://code.google.com/apis/fusiontables">http://code.google.com/apis/fusiontables</a></li>
	        <li>Google Maps API - <a href="http://code.google.com/apis/maps">http://code.google.com/apis/maps</a></li>
	        <li>Fusion Tables Forum  - <a href="http://goo.gl/JZGqr">http://goo.gl/JZGqr</a></li>
	        <li>Twitter - @<a href="http://www.twitter.com/GoogleFT">GoogleFT</a> #io2011 #Geo</li>
					<li>Session Feedback - <a href="http://goo.gl/79Lvg">http://goo.gl/79Lvg</a></li>
      		<li>Trusted Testers - <b>fusion-tables-api-trusted-testers@googlegroups.com</b></li>
        </ul>
      </article>
      <article>
	      <h2>Questions?</h2>
      </article>

    </section>

  </body>
</html>
